<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}">
<!-- Icon Font CSS -->
<link rel="stylesheet" th:href="@{/assets/css/vendor/line-awesome.css}">
<link rel="stylesheet" th:href="@{/assets/css/vendor/themify.css}">
<!-- othres CSS -->
<link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
<link rel="stylesheet" th:href="@{/assets/css/plugins/owl-carousel.css}">
<link rel="stylesheet" th:href="@{/assets/css/plugins/slick.css}">
<link rel="stylesheet" th:href="@{/assets/css/plugins/magnific-popup.css}">
<link rel="stylesheet" th:href="@{/assets/css/plugins/jquery-ui.css}">
<link rel="stylesheet" th:href="@{/assets/css/style.css}">
<body>

</body>

<!-- JS
============================================ -->
<!--layui JS-->
<script src="/assets/layui/layui.js"></script>
<script src="/assets/js/pagination.js"></script>
<!-- Modernizer JS -->
<script src="/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- Modernizer JS -->
<script src="/assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="/assets/js/vendor/popper.js"></script>
<!-- Bootstrap JS -->
<script src="/assets/js/vendor/bootstrap.min.js"></script>

<!-- Slick Slider JS -->
<script src="/assets/js/plugins/countdown.js"></script>
<script src="/assets/js/plugins/counterup.js"></script>
<script src="/assets/js/plugins/images-loaded.js"></script>
<script src="/assets/js/plugins/isotope.js"></script>
<script src="/assets/js/plugins/instafeed.js"></script>
<script src="/assets/js/plugins/jquery-ui.js"></script>
<script src="/assets/js/plugins/jquery-ui-touch-punch.js"></script>
<script src="/assets/js/plugins/magnific-popup.js"></script>
<script src="/assets/js/plugins/owl-carousel.js"></script>
<script src="/assets/js/plugins/scrollup.js"></script>
<script src="/assets/js/plugins/waypoints.js"></script>
<script src="/assets/js/plugins/slick.js"></script>
<script src="/assets/js/plugins/wow.js"></script>
<script src="/assets/js/plugins/textillate.js"></script>
<script src="/assets/js/plugins/elevatezoom.js"></script>
<script src="/assets/js/plugins/sticky-sidebar.js"></script>
<script src="/assets/js/plugins/smoothscroll.js"></script>
<!-- Main JS -->
<script src="/assets/js/main.js"></script>
<a href="/websocket/2">hahaha</a>
<script>
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //建立连接，这里的/websocket ，是Servlet中注解中的那个值
        websocket = new WebSocket("ws://localhost:8080/websocket/2");
    }
    else {
        alert('当前浏览器 Not support websocket');
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功");
    };
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data);
        if(event.data=="200"){
            console.log("数据更新啦");
        }
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭WebSocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    };
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

</script>
</html>